<template>
    <div>
        <span class="m-shadow" @click="closeMore"></span>
        <div class="m-college">
            <em class="m-close" @click="closeMore">X</em>
            <p class="m-college-title">正在拼单</p>
            <div class="m-college-list">
                <college-item v-for="(item,index) in 13" :key="index"></college-item>
            </div>
            
        </div>
        
    </div>
</template>
<script>
export default {
    name:'',
    data () {
        return {

        }
    },
    methods: {
        closeMore() {
            this.$emit('closeMore');
        }
    },
    components: {
        collegeItem:()=>import('./collegeItem'),
    }
}
</script>
<style lang="less" scoped>
.m-close{
    position: absolute;
    top: -3rem;
    right: 0;
    z-index: 3;
    background: white;
    .border-radius(100%);
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    text-align: center;
    line-height: 1.6rem;
}
.m-college{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 78%;
    height: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    background: white;
    .border-radius(4px);
    
    .m-college-list{
        padding: .8rem;
        height: 82%;
        overflow: scroll;
    }
}
.m-college-title{
    text-align: center;
    border-bottom: 1px solid @background-gray;
    line-height: 2rem;
}
</style>
